<template>
    <div>
        <n-date-picker
            :type="type"
            clearable
            :formatted-value="value"
            :value-format="formatPattern"
            @confirm="doConfirm"
            @clear="doConfirm"
        />
    </div>
</template>
<script setup>
import { computed } from 'vue'

const props = defineProps({
    formatPattern: {
        type: String,
        default: 'yyyy-MM-dd'
    },
    value: {
        type: String,
        default: ''
    },
    joinChar: {
        type: String,
        default: '~'
    }
})

const emits = defineEmits(['update:value'])

const type = computed(() => {
    if (props.formatPattern.includes('HH') || props.formatPattern.includes('hh')) {
        return 'datetimerange'
    }
    return 'daterange'
})

const value = computed(() => {
    return props.value ? props.value.split(props.joinChar) : null
})

function doConfirm(value, formattedValue) {
    if (!value) {
        emits('update:value', '')
        return
    }
    emits('update:value', formattedValue.join(props.joinChar))
}
</script>
<style scoped></style>
